<script>
    import BaseBanner from '@c/BaseBanner/BaseBanner'//轮播图
    export default {
        data() {
            return {
                imgUrls: [
                    'https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/goodsinfo/banner%402x.png',
                ],
                bannerClass: 'goodsinfoBanner',//商品详情banner
                day: 0,
                hour: 0,
                min: 0,
                sec: 0,
                sellinfo:[
                    {
                        label:'产地',
                        val:'烟台'
                    },{
                        label:'规格',
                        val:'1斤'
                    },{
                        label:'重量',
                        val:'250g*1 盒'
                    },{
                        label:'包装',
                        val:'盒装'
                    },{
                        label:'储藏温度',
                        val:'0-8°C'
                    },
                ]
            }
        },
        components: {
            BaseBanner,
        },
        methods: {
            /**
             * @Description 倒计时
             * @author Anonymous
             * @date 2019/6/8
             */
            countdown() {
                //获取当前时间
                var date = new Date();
                var now = date.getTime();
                //设置截止时间
                var endDate = new Date("2019-07-08 23:23:23");
                var end = endDate.getTime();
                //时间差
                var leftTime = end - now;
                //定义变量 d,h,m,s保存倒计时的时间
                if (leftTime >= 0) {
                    this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                    this.hour = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                    this.min = Math.floor(leftTime / 1000 / 60 % 60);
                    this.sec = Math.floor(leftTime / 1000 % 60);
                }
                //递归每秒调用countTime方法，显示动态时间效果
                setTimeout(this.countdown, 1000);
            },
        },
        mounted() {
            this.countdown()
        },
        created() {
        }
    }
</script>
<template>
    <div class="GoodsInfo">
        <!--详情顶部-->
        <div class="infotop">
            <!--banner-->
            <BaseBanner :imgUrls="imgUrls" :bannerClass="bannerClass"/>
            <div class="infoxuanchuan">
                <img class="xuanchaunbgi"
                     src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/goodsinfo/%E7%A7%92%E6%9D%80%402x.png"
                     alt="">
                <span class="cutdownlabel">距离活动结束还有</span>
                <div class="cutdownArea">
                    <span class="days">{{day}}天</span>
                    <span class="cutdownvalue">{{hour}}</span>
                    <span class="timelabel">时</span>
                    <span class="cutdownvalue">{{min}}</span>
                    <span class="timelabel">分</span>
                    <span class="cutdownvalue">{{sec}}</span>
                    <span class="timelabel">秒</span>
                </div>
            </div>
            <div class="infosarea">
                <div class="top">
                    <span class="goodsname">山东美早樱桃250g/盒</span>
                    <span class="goodsselnumber">已售322件</span>
                </div>
                <div class="bottom">
                    <div class="goodspricearea">
                        <span class="price">￥16.60</span>
                        <span class="marketprice">￥25.88</span>
                    </div>
                    <div class="ctrbuynumber">
                        <img class="ctricon"
                             src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/goodsinfo/-%402x.png" alt="">
                        <span class="number">10</span>
                        <img class="ctricon"
                             src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/goodsinfo/%2B%402x.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!--中部详情区域-->
        <div class="infocenter">
            <!--下单状态-->
            <div class="orderstate">
                <span class="statelabel">下单动态</span>
                <scroll-view :style="{'width': '654rpx'}" :scroll-x="true">
                    <div class="userArea">

                        <div class="list" v-for="(v,i) in 20" :key="i">
                            <img class="usericon"
                                 src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/goodsinfo/1%402x.png"
                                 alt="">
                            <span class="username">买手鲜团</span>
                        </div>

                    </div>
                </scroll-view>
            </div>
            <!--售卖信息-->
            <div class="sellinfoarea">
                <div class="sellinfoslist" v-for="(v,i) in sellinfo" :key="i">
                    <span>{{v.label}}</span>
                    <span>{{v.val}}</span>
                </div>
            </div>
        </div>
        <!--悬浮底部-->
        <div class="goodsinfobottom">
            <div class="left">
                <img class="shopcar"
                     src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/goodsinfo/%E8%B4%AD%E7%89%A9%E8%BD%A6%402x.png"
                     alt="">
                <div class="shopcarnum">2</div>
            </div>
            <div class="right">
                <div class="addshopcar">加入购物车</div>
                <div class="buynow">立即购买</div>
            </div>
        </div>

    </div>
</template>
<style lang='scss'>
    @import "GoodsInfo";
</style>
